<template>
  <div>
    <!-- <h1>发表评论</h1> -->
    <textarea name="" value = '123' placeholder="留言（最多不超过200字）" class="textarea" v-model="msg" maxlength="200"></textarea>
    <mt-button type="primary" size="large" @click="addComment">发表评论</mt-button>
    <div class="other-comment">
      <div class="0-cmtlist" v-for="item in commentList" :key="item.time">
        <div class="o-cmt">第{{ fooler }}楼发表时间{{ item.time }}</div>
        <div class="o-body"><p>
          {{ item.text }}</p></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";

export default {
  data(){
    return {
      commentList : [
        {time :'2018.12.12',text:'说的话'},
        {time :'2018.12,14',text:'嗯嗯嗯嫩恩'}
      ],
      fooler : 0,
      msg : '',
    }
  },
  methods : {
    addComment(){
      // var text = document.getElementsByClassName('textarea')[0].value;
      if(this.msg.trim() == ''){
        Toast('输入不能为空！');
        return
      }else{
        var cmt = {
          time : new Date(),
          text : this.msg,
        }
        this.commentList.push(cmt);
        this.msg = '';
        Toast('发表成功！')
      // this.fooler ++;
      }
    }
  }
}
</script>
<style scoped>
  .other-comment{
    padding: 10px;
  }
  .o-cmt{
    width: 100%;
    background: gray
  }
  .o-body{
    width: 100%;
    height: 100px;
    border: 1px solid gray;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>


